<template>
  <div style="height: 100%">

    <el-container class="tenantBack" style="min-height: 100vh; ">
      <el-aside :width="sideWidth + 'px'" style=" box-shadow: 2px 0 6px rgb(0 21 41 / 35%)">
        <div :width="sideWidth + 'px'" style="min-height: 30%;padding-top: 20px;padding-left: 20px;" >
          <label for="check" class="bar" >
            <input id="check" type="checkbox" @click="collapse">
            <span class="top"></span>
            <span class="middle"></span>
            <span class="bottom"></span>
          </label>
          <div v-show="logoTextShow" style="height: 50px;width:130px;line-height: 20px;margin-left: 20px; text-align: center">
            <b style="color:black">管理员系统</b>
          </div>
        </div>
        <el-menu :default-openeds="['2']" style="min-height: 70%; overflow-x: hidden"
                 text-color="#000"
                 active-text-color="#4198b9"
                 :collapse-transition="true"
                 :collapse="isCollapse"
                 class="el-menu-vertical-demo"
                 router
        >
          <el-menu-item index="ManagerDetail">
              <i class="el-icon-s-home"></i>
              <span slot="title">主页</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">系统管理</span>
            </template>
            <el-menu-item index="TenantManage" >
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span slot="title">租户管理</span>
            </template>
          </el-menu-item>
            <el-menu-item index="TenantStatistics" >
              <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span slot="title">租户费用统计</span>
              </template>
            </el-menu-item>
            <el-menu-item index="ConsumerManage">
              <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span slot="title">用户管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="BillingManage">
              <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span slot="title">计费管理</span>
              </template>
            </el-menu-item>
          </el-submenu>
          <el-menu-item index="QuestionnaireManage">
            <i class="el-icon-reading"></i>
            <span slot="title">问卷管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="border-bottom: 0px solid #ccc;  box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);">
          <div style="line-height: 60px; display: flex">
            <div style="flex: 1; font-size: 20px">
<!--              <span :class="collapseBtnClass" style="cursor: pointer;font-size: 18px" @click="collapse"></span>-->
              <el-breadcrumb separator="/" style="display: inline-block; margin-left: 10px" >
                <el-breadcrumb-item :to="{path:'/'}">登录</el-breadcrumb-item>
                <el-breadcrumb-item>管理员系统</el-breadcrumb-item>
              </el-breadcrumb>
            </div>

            <el-dropdown style="width:70px; cursor: pointer">
              <span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
              <el-dropdown-menu slot="dropdown" style="width: 100px;text-align: center">
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>

        <el-main >
<!--          表示当前页面的子路由会在<router-view/>中表示-->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
    </div>

</template>

<script>
export default {
  name: 'HomeView',

  data(){
    /*    const item = {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        };*/
    return{
      msg:"hello",
      collapseBtnClass:'el-icon-s-fold',
      isCollapse: true,
      sideWidth: 64,
      logoTextShow: false,
    }
  },
  created(){
  },
  methods:{
    collapse(){//点击收缩按钮触发
      this.isCollapse = !this.isCollapse
      if(this.isCollapse){
        this.sideWidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
        this.logoTextShow = false;
      }
      else{
        this.sideWidth = 200
        this.collapseBtnClass = 'el-icon-s-fold'
        this.logoTextShow = true
      }
    },


  }
}
</script>
<style>
.tenantBack{
  background: url("@/views/bg.png") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
.el-menu-vertical-demo{
  background: url("@/views/bg.png") no-repeat;
}
input[type = "checkbox"] {
  -webkit-appearance: none;
  display: none;
  visibility: hidden;
}

.bar {
  position: relative;
  cursor: pointer;
  height: 20px;
}

.bar span {
  position: absolute;
  width: 22px;
  height: 3px;
  background: #fff;
  border-radius: 100px;
  display: inline-block;
  transition: 0.3s ease;
  left: 0;
}

.bar span.top {
  top: 0px;
}

.bar span.middle {
  top: 9px;
}

.bar span.bottom {
  top:18px
}
input[type]:checked ~ span.top {
  transform: rotate(45deg);
  transform-origin: top left;
  width: 25px;
  left: 5px;
}

input[type]:checked ~ span.bottom {
  transform: rotate(-45deg);
  transform-origin: top left;
  width: 25px;
  bottom: -1px;
  box-shadow: 0 0 10px #495057;
}

input[type]:checked ~ span.middle {
  transform: translateX(-20px);
  opacity: 0;
}
</style>



